<template>
	<transition
		enter-active-class="animate__animated animate__fadeInRight"
		leave-active-class="animate__animated animate__fadeOutRight">
		<div class="pt-2" v-if="betslipStore.tab === BetslipTab.Combo && betslipStore.list.length > 0">
			<betslip-combo-header :comboOdds="comboOdds" :comboBonusOdds="comboBonusOdds" />
			<betslip-combo-bonus class="my-2" />
			<betslip-action :data="betslipStore.combo" class="flex justify-end" :odds="odds" />
		</div>
	</transition>
</template>

<script lang="ts" setup>
import BetslipComboHeader from './betslip-combo-header.vue'
import BetslipComboBonus from './betslip-combo-bonus.vue'
import BetslipAction from '../betslip-action/index.vue'
import { useBetslipStore, useMatchStore, useBettingConfigStore } from '@/store'
import { BetslipTab } from '@/types'
import { watch, computed } from 'vue'
import { getComboOddsBaisc, getComboOddsBonus } from '@/utils'

const betslipStore = useBetslipStore()
const bettingConfigStore = useBettingConfigStore()
const matchStore = useMatchStore()

const comboOdds = computed(() => {
	const odds = betslipStore.comboList.map(
		(item) => matchStore.getSelection(item.eventId, item.marketId, item.id)?.trueOdds || 1
	)
	return getComboOddsBaisc(odds)
})

const comboBonusOdds = computed(() => {
	const odds = betslipStore.comboList.map(
		(item) => matchStore.getSelection(item.eventId, item.marketId, item.id)?.trueOdds || 1
	)
	const oddsBonus = getComboOddsBonus(
		odds,
		bettingConfigStore.comboBonus,
		bettingConfigStore.comboBonusMinTrueOdds
	)
	return comboOdds.value * oddsBonus
})

const odds = computed(() => comboOdds.value + comboBonusOdds.value)

watch(
	() => betslipStore.comboList.length,
	() => {
		betslipStore.combo.trend = ''
		betslipStore.combo.needAccept = false
	}
)
</script>
